import React, { useState } from 'react'
import { Route, useRouteMatch, Switch, Redirect } from 'react-router-dom'

import Intheaters from './Intheaters'
import Comingsoon from './Comingsoon'

import MyLink from '../navlink/MyLink'

export default function movies(props) {

  const { path } = useRouteMatch()

  const [tabs] = useState([
    {
      id: '001',
      title: '正在热映',
      path: `${path}/intheaters`
    },
    {
      id: '002',
      title: '即将上映',
      path: `${path}/comingsoon`
    }
  ])
  
  return (
    <>
      <ul>
        {
          tabs.map(tab => (
            <MyLink
              key={tab.id}
              route={tab}
              tag="li"
            ></MyLink>
          ))
        }
      </ul>
      <div>
        <Switch>
          <Route path={`${path}/intheaters`}>
            <Intheaters></Intheaters>
          </Route>
          <Route path={`${path}/comingsoon`}>
            <Comingsoon></Comingsoon>
          </Route>
          <Redirect from="/movies" to="/movies/intheaters"></Redirect>
        </Switch>
      </div>
    </>
  )
}
